<template>
  <view class="zm-comment w-full bg-#fff px-[25rpx] p-[20rpx] flex items-center pos-relative"
    :style="{ height: inputWrapHeight }">
    <wd-img :width="'50rpx'" :height="'50rpx'" src="/static/message/voice@2x.png" @click="textInput = !textInput" />
    <view class="flex-1 h-[83rpx] rounded-[32rpx] flex items-center bg-#fafafa px-[25rpx] mx-[20rpx]" v-if="textInput">
      <input v-model="value" placeholder="Leave a Comment~" placeholder-class="color-#C1C1C1" @focus="onFocus"
        @blur="onBlur" @confirm="onSend" class="w-full" />
    </view>
    <view
      class="flex-1 h-[83rpx] rounded-32rpx border-width-2rpx border-solid border-color-#FFDDCC leading-83rpx text-center color-#333333 text-27rpx mx-20rpx"
      @touchstart="startRecord" @touchend="endRecord" v-else>
      Hold to Talk
    </view>
    <wd-img :width="'50rpx'" :height="'50rpx'" @click="playVoice" src="/static/message/emoji@2x.png" />
    <wd-img :width="'55rpx'" :height="'55rpx'" @click.stop="onAddClick" src="/static/social/add@2x.png" />
    <view class="pos-absolute provide right-[25rpx]" v-if="Provide">
      <view
        class="w-[366rpx] h-[117rpx] bg-[#FAFAFA] rounded-[22rpx] flex justify-between py-[10rpx] px-[20rpx] shadow-lg">
        <view class="w-1/3 flex flex-col justify-center items-center" @click="chooseImage('album')">
          <wd-img :width="'38rpx'" :height="'38rpx'" src="/static/message/picture@2x.png" />
          <view class="text-23rpx">Album</view>
        </view>
        <view class="w-1/3 flex flex-col justify-center items-center" @click="chooseImage('camera')">
          <wd-img :width="'38rpx'" :height="'38rpx'" src="/static/message/camera@2x.png" />
          <view class="text-23rpx">Camera</view>
        </view>
        <view class="w-1/3 flex flex-col justify-center items-center" @click="showToast">
          <wd-img :width="'38rpx'" :height="'38rpx'" src="/static/message/sharess@2x.png" />
          <view class="text-23rpx">Share</view>
        </view>
        <view class="bubble"></view>
      </view>
    </view>
  </view>
  </template>
  
  <script setup>
  import { showToast } from '@/utils/utils'
  import { ref, onMounted, onUnmounted, defineEmits } from 'vue'
  
  const emit = defineEmits()
  const value = ref('')
  const inputWrapHeight = ref('0rpx')
  const Provide = ref(false)
  const textInput = ref(true)
  const onFocus = () => {
    console.log('Input focused')
  }
  
  const onBlur = () => {
    inputWrapHeight.value = '0rpx'
  }
  
  const onAddClick = () => {
    Provide.value = !Provide.value
  }
  
  const onSend = () => {
    if (value.value.trim() !== '') {
      emit('send', value.value)
      value.value = ''
    }
  }
  
  onMounted(() => {
    try {
      uni.onKeyboardHeightChange((res) => {
        inputWrapHeight.value = res.height > 0 ? '160rpx' : '0rpx'
      })
    } catch (error) {
      console.error('Failed to get system info:', error)
    }
  })
  
  onUnmounted(() => {
    uni.offKeyboardHeightChange()
  })
  
  // 选择图片（相册/拍照）
  const chooseImage = (type) => {
    uni.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: [type],
      success: (res) => {
        if (res.tempFilePaths.length > 0) {
          console.log('选中的图片路径:', res.tempFilePaths[0])
          emit('sendImage', res.tempFilePaths[0]) // 发送图片路径
          onAddClick()
        }
      },
      fail: (err) => {
        console.error('选择图片失败:', err)
        onAddClick()
      }
    })
  }

  const voicePath = ref('') // 保存录音文件路径
const recorderManager = uni.getRecorderManager() // 获取录音管理器
const innerAudioContext = uni.createInnerAudioContext() // 获取音频播放管理器

// 录音开始
const startRecord = () => {
  console.log('开始录音')
  recorderManager.start() // 开始录音
}

// 录音结束
const endRecord = () => {
  recorderManager.stop()
  recorderManager.onStop((res) => {
    console.log(res.tempFilePath, '语音')
    if (res.tempFilePath) {
      voicePath.value = res.tempFilePath
      // 只有在录音成功停止后才触发发送
      emit('sendVoicePath', voicePath.value)
    } else {
      uni.showToast({
        title: '录音失败',
        icon: 'none',
      })
    }
  })
}

const playVoice = () => {
  if (voicePath.value) {
    console.log('播放录音')
    innerAudioContext.src = voicePath.value // 设置音频路径
    innerAudioContext.autoplay = true // 设置自动播放
    innerAudioContext.play() // 播放音频
  } else {
    console.log('没有录音文件可播放')
  }
}
  </script>
  
  <style scoped>
  .zm-comment {
    position: fixed;
    bottom: 0;
    left: 0;
    min-height: 120rpx;
  }
  
  .provide {
    top: -150rpx;
  }
  
  .bubble {
    position: absolute;
    right: 6rpx;
    bottom: -48rpx;
    z-index: 1;
  }
  
  .bubble::after {
    width: 0;
    height: 0;
    content: '';
    border: 18rpx solid;
    border-color: #fafafa transparent transparent transparent;
    /* 朝下的三角形 */
  }
  </style>
  